<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plink - Create payment links and send them to your clients</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/create.css">
    <link rel="stylesheet" href="./css/send.css">
    <link rel="stylesheet" href="./css/scan.css">
    <link rel="stylesheet" href="./css/apps.css">
    <link rel="stylesheet" href="./css/footer.css">

    <!-- animatejs -->
    <script src="https://cdn.bootcdn.net/ajax/libs/scrollReveal.js/4.0.7/scrollreveal.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

</head>

<body>
    <!-- 导航 -->
    <nav>
        <div class="navContent animate__animated">
            <div>
                <a class="logo" href="/">
                    <img src="./src/img/logo--light.svg" alt="">
                </a>
            </div>

            <div>
                <a href="#">FAQ</a>
                <a href="#">Contact</a>
                <a class="button" href="#">Login with Mollie</a>
            </div>
        </div>
    </nav>

    <!-- 首页 -->
    <section class="home" id="home">
        <div class="videoPlay">
            <video id="introVideo" style="opacity: 1;" oncanplaythrough="introVideo()" muted playsinline autoplay>
                <source src="./src/video/intro.webm" type="">
            </video>
            <video id="loopVideo" style="opacity: 0;" muted playsinline loop>
                <source src="./src/video/loop.webm" type="">
            </video>
        </div>
        <div class="homeText">
            <div class="homeTitle">
                <span>
                    <div class="first animate__animated" style="display: none;">Send</div>
                    <div class="first animate__animated" style="display: none;">payment</div>
                    <div class="first animate__animated" style="display: none;">requests,</div>
                    <div class="secend animate__animated" style="display: none;">get </div>
                    <div class="secend animate__animated" style="display: none;">paid </div>
                    <div class="secend animate__animated" style="display: none;">fast!</div>
                </span>

            </div>
            <div class="homeAd animate__animated " style="display: none;">
                86% of our payment requests get paid within 12 hours.
            </div>
        </div>
    </section>
    <!-- 第二个 -->
    <section class="Secend">
        <div class="coin">
            <div>
                <video muted playsinline loop autoplay>
                    <source src="./src/video/coin_1.mp4">
                </video>
            </div>
            <div>
                <video muted playsinline loop autoplay>
                    <source src="./src/video/coin_2.mp4">
                </video>
            </div>
            <div>
                <video muted playsinline loop autoplay>
                    <source src="./src/video/coin_3.mp4">
                </video>
            </div>
        </div>
        <div class="secTital">
            <div class="secItem">Create</div>
            <div class="secItem">payment</div>
            <div class="secItem">requests</div>
            <div class="secItemSmall">
                Make a simple payment link in
                <a href="#">5 seconds.</a>
            </div>
            <div class="secItemSmall">Use our powerful features to customize your request.</div>
        </div>
        <ul>
            <li>
                <h3>One-off or reusable</h3>
                <h4>Request one payment. Or get paid multiple times with a reusable link.</h4>
            </li>
            <li>
                <h3>One-off or reusable</h3>
                <h4>Request one payment. Or get paid multiple times with a reusable link.</h4>
            </li>
            <li>
                <h3>One-off or reusable</h3>
                <h4>Request one payment. Or get paid multiple times with a reusable link.</h4>
            </li>
            <li>
                <h3>One-off or reusable</h3>
                <h4>Request one payment. Or get paid multiple times with a reusable link.</h4>
            </li>
        </ul>
    </section>
    <!-- 第三个 -->
    <section class="send">
        <div class="sendVideo">
            <video muted playsinline loop autoplay>
                <source src="./src/video/mail_loop.webm" type="">
            </video>
        </div>
        <div class="sendTitles">
            <h1 class="title">Easily<br>send requests<br>via e-mail or SMS</h1>
            <h2 class="baseline">... or copy-paste the link</h2>
        </div>
    </section>

    <!-- 第四个 -->
    <section class="scan">
        <div class="scanTitle">
            <h1 class="title">Scan<br> &amp; Go</h1>
            <h2 class="baseline">Transform your payment link into a QR code that customers can scan with their phone to pay.
            </h2>
        </div>
        <div class="prllx">
            <div class="scanTool" style="visibility: inherit; opacity: 1; transform: translate3d(278.5px, -7.62591px, 0px)">
                <div class="scanToolimage ">
                    <img class=" QRcode " alt=" QR CODE " src=" ./src/img/plink_hp_qr.png ">
                    <svg viewBox=" 0 0 175 167 " fill=" none " xmlns=" http://www.w3.org/2000/svg ">
                        <g fill=" white " stroke=" #1997FC " stroke-width=" 2 ">
                            <path d=" M1.5 14.5V1H15 "></path>
                            <path d=" M160 0.999999L173.5 1L173.5 14.5 "></path>
                            <path d=" M15 165.5L1.5 165.5L1.5 152 "></path>
                            <path d=" M173.5 152L173.5 165.5L160 165.5 "></path>
                        </g>
                    </svg>
                </div>
            </div>
        </div>
    </section>

    <!-- 第五个 -->
    <section class="apps">
        <div class="appTitle">
            <h1 class="title">
                All major
                <br> payment methods
            </h1>
            <h2 class="baseline">
                Plink works with Mollie. Your customer can complete the payment requests using all major payment methods, like creditcard or iDEAL.
            </h2>
        </div>
        <div class="bgImage">
            <div class="bgImageContent">
                <span>
                    <img src="./src/img/payment-methods_copy_2_2x-1920x0-c-default.png">
                </span>
                <span>
                    <img src="./src/img/payment-methods_copy_2_2x-1920x0-c-default.png">
                </span>
                <span>
                    <img src="./src/img/payment-methods_copy_2_2x-1920x0-c-default.png">
                </span>
                <span>
                    <img src="./src/img/payment-methods_copy_2_2x-1920x0-c-default.png">
                </span>
            </div>
        </div>
    </section>


    <section class="footer">
        <div class="footerVideoContent">
            <div class="footerPrllx">
                <video autoplay muted playsinline loop>
                    <source src="./src/video/loop.webm" type="">
                </video>
            </div>
        </div>
        <div class="footerTitle">
            <h1 class="title">
                Start for
                <br> free today
            </h1>
            <div class="footerButton">
                <h2>Login with Mollie</h2>
            </div>
        </div>
    </section>

</body>
<script src="./js/index.js"></script>
<script>
</script>

</html>